<template>
  <div class="login-box">
      <!-- 图标 -->
      <div class="login-img"><img src="~@/assets/logo.png"></div>
    <el-card class="box-card">
        <!-- 注册和登录 -->
      <el-form  class="login-from" :model="ruleForm" :rules="rules" ref="ruleForm"  >
        <el-form-item prop="username">
            <el-input type="username" placeholder="请输入用户名" v-model="ruleForm.username" prefix-icon="el-icon-user" ></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input placeholder="请输入密码" show-password v-model="ruleForm.password" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
       </el-form>

       <el-button type="primary" class="login-lg" @click="gologin">登录</el-button>
       <el-button type="warning" class="login-res" @click="gocz">重置</el-button>
    </el-card>
 
  </div>
</template>

<script>
export default {
    data() {
        return {
            
          ruleForm: {
          username:'',
          password:''
          },
            
            rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
            
          ],
          }
        };
    },
    created() {

    },
    mounted() {

    },
    methods: {
        gocz(){
            this.$refs['ruleForm'].resetFields()
        },
        gologin(){
          this.$refs.ruleForm.validate(async valid=>{//表单预验证
            if(!valid) return;//验证失败则返回
            const {data:res}=await this.$http.post('login',this.ruleForm)//验证成功则请求网络数据
            console.log({data:res});
            if(res.meta.status !=200) return this.$message.error('用户名或密码错误，登录失败');//验证数据状态值，如果不为200则弹出失败提示
            this.$message.success('登陆成功');//状态值等于200则提示登录成功
            window.sessionStorage.setItem('token',res.data.token);//客户端绑定该账号的token（令牌状态）
            this.$router.push('/Home')//并跳转页面到home
          })
        }
    }
};
</script>

<style scoped>
.login-box{
    background-color: #333;
    width: 100%;
    height: 100%;
    position: relative;
}
.box-card{
    width: 500px;
    height: 300px;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);  
}
.login-img{
    width: 100px;
    height: 100px;
    border: 10px solid #f6f6f6;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top:34%;
    transform: translate(-50%,-50%);
    z-index: 2;
}
.login-img img{
    width: 100%;
}
.login-from{
    width: 80%;
    margin: 0 auto;
    margin-top:60px;
}
.login-lg{
    margin-left: 148px;
}
</style>
